import { Card, Col, Row } from "antd";
import React, { useEffect, useState } from "react";
import { groupBy } from "lodash";
import ReactECharts from "echarts-for-react";
import { getList} from '@/api/mock'
export default function Index() {
  const [mockOptions, setMockOptions] = useState({});
  const getPieOptions = () => {
    return {
      title: {
        text: "某站点用户访问来源",
        subtext: "纯属虚构",
        x: "center",
      },
      tooltip: {
        trigger: "item",
        formatter: "{a}<br/>{b} : {c} ({d}%)",
      },
      legend: {
        orient: "vertical",
        left: "left",
        data: ["直接访问", "邮件营销", "联盟广告", "视频广告", "搜索引擎"],
      },
      series: [
        {
          name: "访问来源",
          type: "pie",
          radius: "55%",
          center: ["50%", "60%"],
          data: [
            { value: 335, name: "直接访问" },
            { value: 310, name: "邮件营销" },
            { value: 234, name: "联盟广告" },
            { value: 135, name: "视频广告" },
            { value: 1548, name: "搜索引擎" },
          ],
          itemStyle: {
            emphasis: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
      ],
    };
  };
  const getGraphicOptions = () => {
    return {
      title: {
        text: "描边文字示例图",
        x: "center",
      },

      graphic: {
        elements: [
          {
            type: "text",
            left: "center",
            top: "center",
            style: {
              text: "Hello,World!",
              fontSize: 70,
              fontWeight: "bold",
              lineDash: [0, 200],
              lineDashOffset: 0,
              fill: "transparent",
              stroke: "#000",
              lineWidth: 1,
            },
            keyframeAnimation: {
              duration: 2000,
              loop: true,
              keyframes: [
                {
                  percent: 0.7,
                  style: {
                    fill: "transparent",
                    lineDashOffset: 200,
                    lineDash: [200, 0],
                  },
                },
                {
                  // Stop for a while.
                  percent: 0.8,
                  style: {
                    fill: "transparent",
                  },
                },
                {
                  percent: 1,
                  style: {
                    fill: "black",
                  },
                },
              ],
            },
          },
        ],
      },
    };
  };
  const getRadarOptions = () => {
    return {
      title: {
        text: "雷达示例",
      },
      legend: {
        data: ["Allocated Budget", "Actual Spending"],
      },
      radar: {
        // shape: 'circle',
        indicator: [
          { name: "Sales", max: 6500 },
          { name: "Administration", max: 16000 },
          { name: "Information Technology", max: 30000 },
          { name: "Customer Support", max: 38000 },
          { name: "Development", max: 52000 },
          { name: "Marketing", max: 25000 },
        ],
      },
      series: [
        {
          name: "Budget vs spending",
          type: "radar",
          data: [
            {
              value: [4200, 3000, 20000, 35000, 50000, 18000],
              name: "Allocated Budget",
            },
            {
              value: [5000, 14000, 28000, 26000, 42000, 21000],
              name: "Actual Spending",
            },
          ],
        },
      ],
    };
  };

  const getMockOptions = (text, data) => { 
    console.log(Object.keys(groupBy(data, "category")));
    const option= {
      title: {
        text,
      },
      tooltip: {
      },
      xAxis: {
        type: "category",
        data: Object.keys(groupBy(data, "category")),
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          data: Object.values(groupBy(data, "category")).map(
            (item) => item.length
          ),
          type: "bar",
        },
      ],
    };
    setMockOptions(option)
  }
  useEffect(() => { 
      
      getList().then(res => {
        getMockOptions("mock", res.data.data.list);
      })
  },[])
  return (
    <>
    <Row gutter={16} style={{ overflow: "hidden" }}>
      <Col span={8}>
        <Card title="Card title1" bordered={false}>
          <ReactECharts option={getPieOptions()} />
        </Card>
      </Col>
      <Col span={8}>
        <Card title="Card title2" bordered={false}>
          <ReactECharts option={getGraphicOptions()} />
        </Card>
      </Col>
      <Col span={8}>
        <Card title="Card title3" bordered={false}>
          <ReactECharts option={getRadarOptions()} />
        </Card>
      </Col>
    </Row>
    <Row gutter={16} style={{ overflow: "hidden" }}>
      <Col span={24}>
        <Card title="mock数据" bordered={false}>
          <ReactECharts option={mockOptions} />
        </Card>
      </Col>
     
    </Row>
    </>
  );
}
